<template>
 <div class="complant_list pd_40">
   <div>
     <el-row :gutter="40">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">投诉内容</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.content">
          </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">投诉时间</span>
          <el-date-picker
            v-model="dataTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">投诉状态</span>
          <el-select v-model="tableData.status" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="待回复" value="1"></el-option>
            <el-option label="已回复" value="2"></el-option>
            <!--<el-option label="已删除" value="3"></el-option>-->
          </el-select>
        </div>
      </el-col>

      <!--<el-col :span="7" class="mg_t20">
        <div class="fsc">
          <span class="articlelist_lable">设计板块</span>
          <el-select v-model="value" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>-->
     </el-row>
     <div class="articlelist_query fbc">
        <p>
         <router-link class="rout_link" :to="{ path: '/complaint/create' }"><el-button  type="primary">创建投诉导文+</el-button></router-link> 
       </p>
       <p>
         <el-button @click="addSee" >重置</el-button>
         <el-button @click="query" type="primary">查询</el-button> 
       </p>
      
    </div>
   </div>
   <div>
     <el-table
      :data="tableList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="createtime"
        width="200"
        label="投诉日期">
        <template slot-scope="scope">
          <span>{{getdates(scope.row.createtime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        width="300"
        label="投诉内容">
      </el-table-column>
      <!--<el-table-column
        width="150"
        prop="address"
        label="涉及版块">
      </el-table-column>-->
      <el-table-column
        width="150"
        prop="nickname"
        label="投诉人">
      </el-table-column>
      <el-table-column
        width="300"
        prop="revert"
        label="回复内容">
      </el-table-column>
      <el-table-column
        width="150"
        prop="address"
        label="发送状态">
        <template slot-scope="scope">
          <span>{{getStatus(scope.row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="administration(scope.row)" type="primary" size="small">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage4"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!--投诉管理alert-->
  <el-dialog title="投诉管理" width="600px" :visible.sync="outerVisible">
    <el-dialog
      width="600px"
      title="投诉回复"
      :visible.sync="innerVisible"
      append-to-body>
      <div>
        <el-input v-model.trim="replyText" type="textarea"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false,outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="reply">确定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-button @click="index=1" :type="index==1?'primary':''">删除投诉</el-button>
      <el-button :disabled="dialog.revert==''?false:true" @click="index=2" :type="index==2?'primary':''">回复投诉</el-button>
      <el-button :disabled="dialog.revert==''?true:false" @click="index=3" :type="index==3?'primary':''">删除回复</el-button>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">取 消</el-button>
      <el-button type="primary" @click="determine">确定</el-button>
    </div>
  </el-dialog>

  <!--alert-->
  <el-dialog
    title="更多用户信息"
    :visible.sync="moreUsermaAlert"
    width="30%"
    center>
    <div class="fbc fwrap f_13">
      
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="moreUsermaAlert=false;">关闭</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      tableList: [], //表格列表
      index: 1,    //dialog里button
      getdates: this.$utils.getdates,
      replyText: '', //回复内容
      dialog: {},   // 详情数据
      dataTime: [],
      tableData: {
        content: '',
        start: '',
        end: '',
        status: '',
        page: 1,
      },
      currentPage4: 1,
      total: null,
      
      value: '',
      input2: '',
      input3: '',
      value4: '',
      value1: '',
      outerVisible: false,
      innerVisible: false,
      centerDialogVisible: false,
      moreUsermaAlert: false,

    }
  },
  created() {
    this.getList()
  },
  watch: {
    "dataTime"(xin,jiu){
      
      console.log(xin)
      if(xin == null) {
        this.tableData.start = '';
        this.tableData.end = '';
      }
      console.log(this.tableData)
    }
  },
  methods: {
    
    
    determine() {    //管理弹窗一级确定
      console.log(this.dialog.id);
      let index = this.index;
      
     if(index == 1) {
        this.$confirm('是否继续删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.guanli();
        }).catch(() => {
                  
        });
      }else if(index == 2) {
        this.outerVisible = false;
        this.innerVisible = true;
      }else  if(index == 3) {
       this.$confirm('是否继续删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.guanli();
        }).catch(() => {
                  
        });
      }

    },
    guanli() {
      let url = '/admin/user/complain_revert';
      let data = { cid: this.dialog.id,is:this.index,revert:this.replyText};
      this.$request.post(url,data).then( res => {
        if(res.data.code == '0000') {
          console.log(res)
          this.$message({
            type: 'success',
            message: '操作成功'
          });
          this.outerVisible = false;
          this.innerVisible = false;
          this.replyText = '';
          this.index = 1
          this.getList()
        }
      })
    },

    query() {         //查询
      let time = this.dataTime;
      console.log(time instanceof Array)
      if(time instanceof Array) {
        if(time.length > 0) {
          this.tableData.start = Number(time[0]/1000);
          this.tableData.end = Number(time[1]/1000);
        }
      }
      
      this.tableData.page = 1;
      this.currentPage4 = 1;
      this.getList()
    },
    addSee() {
      this.dataTime = [];
      this.tableData.content = '';
      this.tableData.start = '';
      this.tableData.end = '';
      this.tableData.status = '';
      this.tableData.page = 1;
      this.currentPage4 = 1;
      this.getList();
     
    },
    reply() {
      this.guanli();
    },
    getList() {         //获取列表
      let url = '/admin/user/complain_list';
      let data = this.tableData;
      this.$request.post(url,data).then( res => {
        console.log(res)
        if(res.data.code == '0000') {
          this.total = res.data.data.page.total;
          console.log(this.total)
          this.tableList = res.data.data.list;
        }
      })
    },
    administration(row) {     // 点击管理
      this.dialog = row;
      console.log(this.dialog)
      this.outerVisible = true;
    },
    getStatus(status) {        // 判断状态
      if(status == 1) {
        return '待处理'
      }else if(status == 2) {
        return '已回复'
      }else if(status == 3) {
        return '已删除'
      }
    },
    deleteOpen() {
      this.$confirm('确定要删除这个帖子', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.tableData.page = val;
      this.getList();
    },
  },
  
}
</script>
<style scoped lang="less">
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
  .user_img {
    width: 50px;
    height: 50px;
  }
  .user_dialog_desc {
    height: 60px;
    border-bottom: 1px solid #999;
  }
  .user_dialog_quan {
    height: 100px;
  }
  .say_list_img {
    width: 30px;
    height: 40px;
    margin: 2px;
  }
  .textarea {
    border: 1px solid #000;
    width: 300px;
    height: 50px;
    padding: 5px;
  }
  .rout_link {
    margin-right: 20px;
  }
  
</style>

